<template>
  <view>
    <view class="nav-tab"></view>
    <view class="container">
      <view class="container-Top">
        <view class="Top1">
          <view class="Top1-1">
            <image class="img1"></image>
            <view><text>交易物流</text></view>
          </view>
        </view>
        <view class="Top1">
          <view class="Top1-1">
            <uni-badge size="small" :text="2" absolute="rightTop" type="primary"></uni-badge>
            <image src="/static/uni.png" class="img1"></image>
            <view><text>系统通知</text></view>
          </view>
        </view>
        <view class="Top1">
          <view class="Top1-1">
            <image class="img1"></image>
            <view><text>优惠促销</text></view>
          </view>
        </view>
      </view>
    </view>
    <view class="container2">
      <view class="Left-Big" v-for="(item, index) in list" :key="index">
        <view class="BigL"><image class="img" :src="item.image"></image></view>
        <view class="BigR">
          <view class="yaoTop">
            <text class="yaoTop-1">{{ item.text }}</text>
            <text class="time">{{ item.time }}</text>
          </view>
          <view class="wenti">
            <text class="dosag">{{ item.textDas }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 0,
          text: '药店1',
          textDas: '您好,请问999感冒灵的用法用量是.....',
          image: '/static/uni.png',
          time: '11:10'
        },
        {
          id: 1,
          text: '药店2',
          textDas: '您好,请问999感冒灵的用法用量是.....',
          image: '/static/uni.png',
          time: '1:10'
        },
        {
          id: 2,
          text: '药店3',
          textDas: '您好,请问999感冒灵的用法用量是.....',
          image: '/static/uni.png',
          time: '8:10'
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.nav-tab {
  width: 100%;
  height: 50px;
  background-color: #00b359;
  border-radius: 0px 0px 20px 20px;
}
.container2 {
  width: 90%;
  // height: 100px;
  background-color: #ffffff;
  box-shadow: 0px 0px 33px 0px rgba(59, 67, 83, 0.05);
  border-radius: 10px;
  // border: 1px solid red;
  margin: 0px auto;
  margin-top: -34px;
  .Left-Big {
    display: flex;
    align-self: center;
    margin-top: 10px;
    .BigL {
      width: 50px;
      height: 50px;
      border: 1px solid red;
      margin-left: 5px;
      margin-top: 5px;
      border-radius: 50%;
      overflow: hidden;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .BigR {
      width: 77%;
      margin-left: 8px;
      border-bottom:0.5px solid #F5F5F5;
      .yaoTop {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .yaoTop-1 {
          width: 127px;
          height: 20px;
          font-family: PingFang-SC-Medium;
          font-size: 16px;
          color: #333333;
          letter-spacing: -0.11px;
          line-height: 20px;
          font-weight: 500;
        }
        .time {
          width: 35px;
          height: 20px;
          font-family: PingFang-SC-Medium;
          font-size: 13px;
          color: #999999;
          letter-spacing: 0px;
          line-height: 20px;
          font-weight: 500;
        }
      }
      .wenti {
        .dosag {
          width: 243px;
          height: 20px;
          font-family: PingFang-SC-Medium;
          font-size: 13px;
          color: #999999;
          letter-spacing: -0.09px;
          line-height: 20px;
          font-weight: 500;
        }
      }
    }
  }
}
.container {
  width: 100%;
  height: 100px;
  position: relative;
  top: -39px;
  .container-Top {
    width: 90%;
    height: 100px;
    // transform: scaleX(-1);
    background: #ffffff;
    box-shadow: 0px 0px 33px 0px rgba(59, 67, 83, 0.05);
    border-radius: 10px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    .Top1 {
      width: 100px;
      height: 100px;
      // border: 1px solid red;
      display: flex;
      justify-content: center;
      /deep/ .uni-badge {
        left: 84rpx !important;
        top: -92rpx !important;
      }
      .Top1-1 {
        align-self: center;
        .img1 {
          width: 44px;
          height: 44px;
          border: 1px solid blue;
          border-radius: 50%;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
